<template>
  <div class="summary">
    <!--  -->
    <div class="linebox"></div>
    <!--  -->
    <div class="contdesc">
      <div class="desinfobox">
        <img src="../assets/img/leader.png" class="leaderimg" alt="" />
        <div class="desinfo">
          <p><span>Dear HR Leaders,</span></p>
          <p>
            I am thrilled to welcome you to the 2023 Greater China HR Conference
            taking place at The Ritz-Carlton, Haikou & Renaissance Haikou Hotel.
            Our conference theme this year is
            <span>"Be Together Become Greater”.</span> It serves as a reminder
            that by being together, we can achieve greatness and make a lasting
            impact among our HR community and Marriott family.
          </p>

          <p>
            We aim to provide a platform for all of you to
            <span>Reunite</span> with old friends, make new connections and
            foster teamwork across the Greater China HR community. Additionally,
            we seek to <span>Recognize</span> the outstanding contributions and
            achievements of HR leaders who have made a significant impact in
            their respective fields. Through the plenary sessions, interactive
            workshops, and inspiring discussions, we hope to
            <span>Inspire</span> and empower you with fresh insights, innovative
            ideas, and practical strategies that will elevate your HR practices
            to new heights. Finally, we believe that this conference will
            contribute to your personal and professional Growth by providing a
            conducive environment for learning, sharing, and expanding your
            horizons.
          </p>
          <p>
            On behalf of the entire organizing committee, I once again extend a
            warm welcome to you. Your presence and active participation will
            undoubtedly contribute to the success of our conference. I am
            genuinely excited to meet you, reconnect with familiar faces, and
            embark on this journey of growth and inspiration together.
          </p>
          <p>
            Wishing you safe travels and look forward to seeing you all in
            Haikou for an incredible experience!
          </p>
        </div>
        <div class="signinfo">
          <img src="../assets/img/leader_sign.png" class="signimg" alt="" />
          <p>Regan Taikitsadaporn</p>
          <p>Chief Human Resources Officer, Greater China</p>
        </div>
      </div>
    </div>
    <!-- 倒计时 -->
    <div class="countdownbox">
      <p class="title">COUNTDOWN TO THE EVENT</p>
      <div class="cdowninfobox">
        <div class="citem clmstart">
          <div class="circlebox clmcenter">
            <p>{{ times.day }}</p>
            <p>Days</p>
          </div>
        </div>
        <div class="citem clmstart">
          <div class="circlebox clmcenter">
            <p>{{ times.hour < 10 ? "0" + times.hour : times.hour }}</p>
            <p>Hrs</p>
          </div>
        </div>
        <div class="citem clmstart">
          <div class="circlebox clmcenter">
            <p>{{ times.min < 10 ? "0" + times.min : times.min }}</p>
            <p>Mins</p>
          </div>
        </div>
        <div class="citem clmstart">
          <div class="circlebox clmcenter">
            <!-- <el-progress
              type="circle"
              :percentage="secondsp"
              :width="circleWidth"
              :stroke-width="circleStrokeWidth"
              :color="circleColor"
              :define-back-color="bgColor"
              :show-text="false"
            ></el-progress> -->
            <p>
              {{ times.seconds < 10 ? "0" + times.seconds : times.seconds }}
            </p>
            <p>Secs</p>
          </div>
        </div>
      </div>
      <p class="dates">TO NOVEMBER 27-30, 2023</p>
    </div>
    <!-- Agenda -->
    <div class="agendabox">
      <div class="ftitle">AGENDA</div>
      <div class="agendacont">
        <!-- <el-row :gutter="2" class="titlerow">
          <el-col :span="3"
            ><div class="grid-content bg-purple agdtitle"></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple agdtitle">
              <p>Monday</p>
              <p>November 27, 2023</p>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple agdtitle">
              <p>Tuesday</p>
              <p>November 28, 2023</p>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple agdtitle">
              <p>Wednesday</p>
              <p>November 29, 2023</p>
            </div>
          </el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple agdtitle">
              <p>Thursday</p>
              <p>November 30, 2023</p>
            </div>
          </el-col>
        </el-row>
        <el-row
          class="controw"
          v-for="(item, index) in agendaList"
          :key="'agenda' + index"
        >
          <el-col :span="3"
            ><div class="grid-content grid-time">
              <p>{{ item.title }}</p>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content">
              <p v-for="itemd1 in item.date1">{{ itemd1 }}</p>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content">
              <p v-for="itemd2 in item.date2">{{ itemd2 }}</p>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content">
              <p v-for="itemd3 in item.date3">{{ itemd3 }}</p>
            </div>
          </el-col>
          <el-col :span="5"
            ><div class="grid-content">
              <p v-for="itemd4 in item.date4">{{ itemd4 }}</p>
            </div>
          </el-col>
        </el-row> -->
        <img src="../assets/img/agenda.jpg" class="agendaimg" alt="agenda" />
      </div>
    </div>
    <button type="button" class="toregbtn" @click="$router.push('/reg')">
      Register Now
    </button>
    <p
      class="already"
      @click="$router.push({ path: '/reg', query: { from: 'already' } })"
    >
      Already registered?
    </p>
    <!-- 弹窗 -->
    <Dialog v-show="dialogshow" @close="closeDialog" />
  </div>
</template>
<script>
import { formateTimeStamp } from "@/utils/tools.js";
import Dialog from "../components/Calendar-Dialog.vue";
export default {
  data() {
    return {
      dialogshow: false,
      circleWidth: 160,
      circleStrokeWidth: 7,
      circleColor: "#f18f61",
      bgColor: "#FAECE5",
      end_at: "2023/11/27 00:00:00",
      times: {
        day: 0,
        hour: 0,
        min: 0,
        seconds: 0,
      },
      // dayp: 0,
      // hourp: 0,
      // minp: 0,
      // secondsp: 0,
      // agendaList: [
      //   {
      //     title: "08:30 CST",
      //     date1: [],
      //     date2: ["Plenary Sessions + Breakouts", "08:30-18:00"],
      //     date3: ["Plenary Sessions + Breakouts", "08:30-18:00"],
      //     date4: ["TakeCare Activity", "08:30-11:00"],
      //   },
      //   {
      //     title: "12:00 CST",
      //     date1: [],
      //     date2: ["Lunch"],
      //     date3: ["Lunch"],
      //     date4: ["Lunch"],
      //   },
      //   {
      //     title: "13:00 CST",
      //     date1: ["Arrival & Registration", "13:00-19:00"],
      //     date2: ["Breakouts"],
      //     date3: ["Breakouts"],
      //     date4: [],
      //   },
      //   {
      //     title: "19:00 CST",
      //     date1: ["Welcome Reception", "19:00-22:00"],
      //     date2: ["Gala Awards Dinner", "19:00-23:00"],
      //     date3: ["Free Night", "19:00-23:00"],
      //     date4: [],
      //   },
      // ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.mistiming();
    });
    // let box = this.$refs.elebox;
    // this.$store.commit("setAgendaTop", box.offsetTop);
    // console.log(box.offsetTop);
  },
  methods: {
    showDialog() {
      this.dialogshow = true;
      this.stopMove();
    },
    closeDialog() {
      this.Move();
      this.dialogshow = false;
    },
    //停止页面滚动
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },
    //开启页面滚动
    Move() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = ""; //出现滚动条
      document.removeEventListener("touchmove", m, { passive: true });
    },
    //倒计时
    mistiming() {
      var timeStamp = new Date(this.end_at) / 1000 - new Date() / 1000;
      this.times = formateTimeStamp(timeStamp);
      var TimeDown = setInterval(() => {
        if (timeStamp > 0) {
          timeStamp--;
          const newTime = formateTimeStamp(timeStamp);
          this.times.day = newTime.day;
          this.times.hour = newTime.hour;
          this.times.min = newTime.min;
          this.times.seconds = newTime.seconds;
          //计算圆环百分比
          // this.secondsp = 100 - (newTime.seconds / 60).toFixed(2) * 100; //计算圆环百分比
          // this.minp = 100 - (newTime.min / 60).toFixed(2) * 100;
          // this.hourp = 100 - (newTime.hour / 24).toFixed(2) * 100;
          // this.dayp = 100 - (newTime.day / 365).toFixed(2) * 100;
        } else {
          //倒计时结束
          clearInterval(TimeDown);
        }
      }, 1000);
    },
    //
  },
  components: { Dialog },
};
</script>
<style lang="less" scoped>
.summary {
  max-width: 1200px;
  margin: 0 auto;
  .linebox {
    width: 100%;
    height: 65px;
    background: #f18f61;
  }
  //介绍
  .contdesc {
    width: 100%;
    margin: auto;
    color: #000000;
    background: #ededed;
    padding-bottom: 4rem;
    .desinfobox {
      width: 81%;
      margin: auto;
      text-align: left;
      .leaderimg {
        width: 17%;
        margin-top: -2.5rem;
      }
      .desinfo,
      .signinfo {
        p {
          font-size: 0.9375rem;
        }
      }
      .desinfo {
        p {
          font-family: "RidleyMedium";
          padding-bottom: 1.2rem;
          text-align: justify;
          line-height: 1.4;
          span {
            font-family: "RidleyBold";
          }
        }
        p:first-child {
          padding-top: 2rem;
        }
      }
      .signinfo {
        width: 100%;
        text-align: left;
        .signimg {
          width: 24%;
          mix-blend-mode: multiply;
        }
        p {
          font-family: "RidleyBold";
        }
      }
    }
  }
  // 倒计时
  .countdownbox {
    max-width: 1200px;
    margin: auto;
    background: #231816;
    margin-top: 1.5rem;
    .title {
      font-size: 3rem;
      font-family: "RidleyBold";
      color: #f18f61;
      padding-top: 4rem;
      letter-spacing: 0.1rem;
    }
    .cdowninfobox {
      width: 85%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 4rem 0;
      color: #ffffff;
      .citem {
        position: relative;
        width: 25%;
        .circlebox {
          position: relative;
          width: 160px;
          height: 150px;
          border: 3px solid #f18f61;
          box-sizing: border-box;
          p:first-child {
            position: absolute;
            font-family: "RidleyBold";
            font-size: 4rem;
          }
          p:last-child {
            position: absolute;
            top: -1.5rem;
            font-size: 1.5rem;
            padding-top: 1rem;
            background: #231816;
            padding: 0 1rem;
          }
        }
      }
    }
    .dates {
      color: #ffffff;
      font-size: 1.7rem;
      padding-bottom: 4rem;
      letter-spacing: 0.1rem;
    }
  }

  //Agenda
  .agendabox {
    max-width: 1200px;
    margin: auto;
    background: #ffffff;
    margin-top: 1.5rem;
    .agendacont {
      color: #000000;
      text-align: left;
      // .titlerow {
      //   .bg-purple {
      //     background: #eeeded;
      //   }
      //   .agdtitle {
      //     min-height: 82px;
      //     text-align: left;
      //     padding: 0 0.5rem;
      //     display: flex;
      //     flex-flow: column nowrap;
      //     justify-content: center;
      //     align-items: flex-start;
      //     p {
      //       font-size: 1rem;
      //       font-family: "RidleyBold";
      //       line-height: 1;
      //     }
      //   }
      // }
      // .controw {
      //   // border-bottom: 1px solid #000000;
      //   box-sizing: border-box;
      //   .grid-content {
      //     padding: 1rem 0;
      //     min-height: 76px;
      //     border: 1px solid #eeeded;
      //     box-sizing: border-box;
      //     p {
      //       font-size: 1rem;
      //       line-height: 1.3;
      //       font-family: "RidleyMedium";
      //       padding: 0 0.5rem;
      //     }
      //     p:first-child {
      //       font-family: "RidleyBold";
      //     }
      //   }
      //   .grid-time {
      //     text-align: center;
      //     p:first-child {
      //       font-family: "RidleyMedium";
      //     }
      //   }
      // }
      // .controw:last-child {
      //   border-bottom-color: #f18f61;
      //   border-width: 2px;
      // }
      .agendaimg {
        width: 100%;
      }
    }
  }

  //btn
  .toregbtn {
    margin: 2.5rem auto 0;
  }
  .already {
    color: #000000;
    padding-bottom: 3rem;
  }
}
@media only screen and (max-width: 600px) {
  .summary {
    .contdesc {
      .desinfobox {
        .leaderimg {
          width: 30%;
        }
        .desinfo {
          p {
            font-size: 0.8rem;
            line-height: 1.2;
            padding-bottom: 0.8rem;
          }
          p:first-child {
            padding-top: 1rem;
          }
        }
        .signinfo {
          .signimg {
            width: 40%;
          }
          p {
            font-size: 0.7rem;
          }
        }
      }
    }
    .countdownbox {
      .title {
        font-size: 1rem;
        padding-top: 2.5rem;
      }
      .dates {
        font-size: 0.8rem;
        padding-bottom: 2rem;
      }
      .cdowninfobox {
        width: 95%;
        padding: 2.5rem 0;
        .citem {
          .circlebox {
            width: 80px;
            height: 75px;
            p:first-child {
              font-size: 2rem;
            }
            p:last-child {
              font-size: 0.9rem;
              top: -0.8rem;
            }
          }
        }
      }
    }
    .agendabox {
      .agendacont {
        .titlerow {
          .agdtitle {
            height: 65px;
            padding: 0;
            p {
              font-size: 0.8rem;
              transform: scale(0.9);
            }
          }
        }
        .controw {
          .grid-content {
            padding: 0.5rem 0;
            p {
              font-size: 0.8rem;
              transform: scale(0.9);
              line-height: 1;
              padding: 0;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.ftitle {
  width: 100%;
  font-family: "RidleyBold";
  color: #ffffff;
  font-size: 3rem;
  background: #f18f61;
}
@media only screen and (max-width: 600px) {
  .ftitle {
    font-size: 1.8rem;
  }
  .toregbtn {
    font-size: 1rem;
  }
  .already {
    font-size: 0.8rem;
    padding-top: 0.3rem;
  }
  footer {
    .footercont {
      ul {
        li:first-child {
          font-size: 0.9rem;
        }
        li:last-child {
          font-size: 0.6rem;
        }
      }
    }
  }
}
</style>
